<template>
    <a-space start="start" wrap>
        <a-select
            v-for="item in optionsList.slice(0, deepNum)"
            v-model:value="item.val"
            style="width: 180px"
            placeholder="请选择"
            :options="item.options"
            @change="handleChange"
            show-search
        />
        <slot name="other" :isShow="isShow"></slot>
    </a-space>
    <slot name="delete"></slot>
</template>

<script lang="ts" setup name="">
    import { categoryApi, tagApi } from "@/api/titleStore";
    const props = defineProps<{
        api: typeof categoryApi | typeof tagApi;
        isAddDefaultItem: boolean;
        data: {
            currentPid: number;
            idList: number[];
        };
    }>();
    const deepNum = 4;
    const optionsList = ref<Array<{ options: SelectOption; val: number }>>([]);
    const isReload = inject("isReload", ref(false)) as Ref<boolean>;

    // 记录最后一次调用的参数
    const lastPid = ref(0);
    const lastIndex = ref(0);
    // 长度 !==4 或者 最后一个Select的值为-1 就显示
    const isShow = computed(() =>
        optionsList.value.length < deepNum
            ? true
            : optionsList.value.length !== deepNum || optionsList.value[optionsList.value.length - 1].val === -1
    );
    const getOptions = (pid: number, index: number) => {
        optionsList.value = optionsList.value.slice(0, index + 1);
        // 收集 当前已选择的 id
        props.data.idList = optionsList.value.filter((item) => item.val != -1).map((item) => item.val);
        if (pid === -1) {
            // 防止选到了请选择 还继续向后查找
            return;
        }
        if (deepNum === index + 1) {
            return;
        }
        lastPid.value = pid;
        props.data.currentPid = pid;
        lastIndex.value = index;
        props.api({}, "get", pid).then((res) => {
            // 长度为0的不显示
            if (!res.data.data.length) {
                return;
            }
            // 是否添加默认的item
            if (props.isAddDefaultItem) {
                res.data.data = res.data.data.concat({ label: "请选择", value: -1 });
            }
            if (optionsList.value.length) {
                const lastIndex = optionsList.value.length - 1;
                const lastOption = optionsList.value[lastIndex];
                if (lastOption.val == -1) {
                    optionsList.value.splice(lastIndex,lastIndex+1)
                }
            }
            const options = res.data.data.map((item: any) => {
                item["index"] = optionsList.value.length;
                return item;
            });
            optionsList.value.push({ options, val: -1 });
        });
    };
    // 当选择的元素发送改变时
    const handleChange = (value: any, option: any) => {
        getOptions(value, option.index);
    };
    getOptions(0, 0);
    watch(isReload, (v) => {
        v && reloadOptions();
    });
    const reloadOptions = () => {
        getOptions(lastPid.value, lastIndex.value);
        isReload.value = false;
    };
</script>

<style scoped lang="scss"></style>
